/**
 * 创建一个影子DOM
 */

const host = document.getElementById('host');
/**
 * 如果 mode = open，可以通过 host.shadowRoot 获取影子DOM
 * 如果 mode = closed，就获取不到影子根了 host.shadowRoot = null
 */
const shadow = host.attachShadow({ mode: 'open' });
const span = document.createElement('span');
span.textContent = '我是影子DOM';
shadow.appendChild(span);

// 尝试JS获取影子DOM
const s_span = document.querySelector('#host span');
console.log('尝试JS获取影子DOM==》', s_span);

const shadowRoot = host.shadowRoot;
// 通过影子宿主（影子根 shadowRoot）获取影子DOM
console.log('通过影子根获取影子DOM', shadowRoot.querySelector('span'));

/**
 * CSS 封装
 * 页面的CSS不会影响到影子DOM
 * 如何给影子DOM应用上样式？
 *  1. 编程式
 *  2. 声明式
 */

// 1. 编程式
const sheet = new CSSStyleSheet();
sheet.replaceSync('span { color: blue }');
// shadowRoot.adoptedStyleSheets = [sheet]; // 应用样式

// 2. 声明式 需要在外界创建 template 模版
const template = document.getElementById('my-template');
shadowRoot.appendChild(template.content.cloneNode(true));
